<template>
    <div class="xtx-search-page">
      <div class="container">
        <xtx-bread>
          <xtx-bread-item to="/">首页</xtx-bread-item>
          <xtx-bread-item>搜索 "{{$route.query.keyword}}" 的结果：</xtx-bread-item>
        </xtx-bread>
        <div class="wrapper">
          <!-- 筛选区 -->
          <searchSort @changeSortEV = "changeSortEVFn" v-if="goodsList.length > 1"></searchSort>
          <!-- 结果区 -->
          <div class="goods_result" v-if="goodsList.length > 1">
            <GoodsItem v-for="item in goodsList" :key="item.id" :goods="item"></GoodsItem>
          </div>
          <!-- 暂无数据 -->
          <div class="none" v-if="!goodsList.length">
         <img src="../../assets/none.png" alt="" />
          暂无数据
          </div>
          <!-- 分页区 -->
          <xtx-pagination
          v-if="goodsList.length > 1"
          :total="total"
           :pageSize="queryObj.pageSize"
           :currentPage="queryObj.page"
           @current-change="currentChangeFn"
          ></xtx-pagination>
        </div>
      </div>
    </div>
  </template>

<script>
import searchSort from './components/searchSort.vue'
import GoodsItem from '@/components/GoodsItem.vue'
import { getSearchGoodsListAPI } from '@/api'
import { reactive, ref } from 'vue'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'

export default {
  name: 'xtx-search-page',
  components: {
    searchSort,
    GoodsItem
  },
  setup () {
    const route = useRoute()
    const goodsList = ref([]) // 搜索商品结果列表
    const queryObj = reactive({
      page: 1, // 当前页页码
      pageSize: 10, // 每页需要的数据条数
      keyword: route.query.keyword, // 搜索关键词
      sortField: null, // 顺序字符
      sortMethod: null // 排序规则
    })
    const total = ref(0)
    // 解决重新搜索搜索结果不改变
    onBeforeRouteUpdate((to, from, next) => {
      queryObj.keyword = to.query.keyword
      // 重置其他变量
      queryObj.page = 1
      queryObj.pageSize = 10
      queryObj.sortField = null
      queryObj.sortMethod = null
      getSearchGoodsListFn()
      next()
    })
    // 请求商品所有结果
    const getSearchGoodsListFn = async () => {
      const { result: { pageData } } = await getSearchGoodsListAPI(queryObj)
      goodsList.value = pageData.items
      total.value = pageData.counts
    }
    getSearchGoodsListFn()
    // 子组件emit的筛选条件自定义方法
    const changeSortEVFn = (sortObj) => {
      queryObj.sortField = sortObj.sortField
      queryObj.sortMethod = sortObj.sortMethod
      getSearchGoodsListFn()
    }
    // 分页
    const currentChangeFn = (value) => {
      queryObj.page = value
      getSearchGoodsListFn()
    }
    return {
      goodsList,
      changeSortEVFn,
      total,
      queryObj,
      currentChangeFn
    }
  }
}
</script>

  <style lang="less" scoped>
  .xtx-search-page {
    .wrapper {
      background-color: #fff;
      padding: 0 25px;
      .goods-list {
        display: flex;
        flex-wrap: wrap;
        padding: 0 5px;
        li {
          margin-right: 20px;
          margin-bottom: 20px;
          &:nth-child(5n) {
            margin-right: 0;
          }
        }
      }
    }
  }
  .goods_result {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.none {
  padding: 100px 0;
  text-align: center;
  color: #999;
  img {
    width: 100px;
    height: 100px;
    margin-right: 10px;
    object-fit: contain;
  }
}
  </style>
